<template>
  <!-- <transition
    :enter-active-class="enterDir"
    :leave-active-class="leaveDir"
  > -->
    <router-view></router-view>
  <!-- </transition> -->
</template>

<script>
export default {
  data() {
    return {
      enterDir: 'animate__animated animate__slideInRight',
      leaveDir: 'animate__animated animate__slideOutLeft'
    }
  },
  watch: {
    $route(to, from) {
      if (to.meta > from.meta) {
        this.enterDir = 'animate__animated animate__slideInRight'
        this.leaveDir = 'animate__animated animate__slideOutLeft'
      } else {
        this.enterDir = 'animate__animated animate__slideInLeft'
        this.leaveDir = 'animate__animated animate__slideOutRight'
      }
    }
  }
}
</script>

<style lang="stylus">
  
</style>